Godot 3.5 でシンプルなメッセージウインドウ
https://gyazo.com/8c626b24df65b2c293dc508df4adc802
画面下部にあるメッセージウインドウの実装
Controlノードの MarginContainer や Panel などを組み合わせてメッセージウインドウのレイアウトを作成する
https://gyazo.com/fce13f1c5c5c77146a6fc331b5095ceb
スクリプトを作成する。ベースは https://github.com/jontopielski/rpg-textbox-tutorial で、今回のGodot3.5でローグライク系スロットダンジョンゲームを作るでは、プレイヤーの操作を待たずに自動でどんどんメッセージ送りをしたいのでその箇所だけカスタマイズしている
code:gd
extends MarginContainer
const CHAR_READ_RATE = 0.005
onready var label = $MarginContainer/Label
enum State {
READY,
READING,
FINISHED
}
var current_state = State.READY
var text_queue = []
func _ready():
hide_textbox()
queue_text("Let's stop the slots to move on to the adventure.Press the Space key or the ten key.")
Global.connect("add_text", self, "queue_text")
Global.connect("go_next_floor", self, "reset_queue")
func _process(delta):
match current_state:
State.READY:
if !text_queue.empty():
display_text()
State.READING:
pass
# label.percent_visible = 1.0
# $Tween.remove_all()
# change_state(State.FINISHED)
State.FINISHED:
change_state(State.READY)
func queue_text(next_text):
text_queue.push_back(next_text)
func reset_queue():
text_queue.clear()
func hide_textbox():
label.text = ""
hide()
func show_textbox():
show()
func display_text():
var next_text = text_queue.pop_front()
label.text = next_text
label.percent_visible = 0.0
change_state(State.READING)
show_textbox()
$Tween.interpolate_property(label, "percent_visible", 0.0, 1.0, len(next_text) * CHAR_READ_RATE, Tween.TRANS_LINEAR, Tween.EASE_IN_OUT)
$Tween.start()
func change_state(next_state):
current_state = next_state
func _on_Tween_tween_all_completed() -> void:
yield(get_tree().create_timer(0.2), "timeout")
change_state(State.FINISHED)
次々とメッセージ表示要求が出ても大丈夫なように、signal を受信したらtext_queue にどんどん溜め込んでいき、queueにメッセージがあるならば表示している。
メッセージが頭から順番に表示される仕組みは Godot の Labelノードにある percent_visible 設定を変動させるだけで実現できる。
Tweenでこの percent_visible 値を 0 -> 1に変化させるだけでそれっぽいメッセージ表示ができる。
https://gyazo.com/726d8fa4de2fc821608b5ccccda1213f
参考動画
https://www.youtube.com/watch?v=QEHOiORnXIk